<style lang="less" scoped>
	.cardtop {
		position: relative;
		z-index: 10;
		width: 100%;
		height: 100%;
		.top {
			position: relative;
			background: url("http://img10.he29.com/static/mtu4nd/e238d326bf9d1a87.png") no-repeat;
			background-size: 100% 100%;
			height: 188px;
			.user {
				position: absolute;
				width: 100%;
				bottom: -8%;
				right: 5%;
				text-align: right;
				.cu-avatar {
					border: 4rpx solid #ffffff;
				}
			}
			.uinfo {
				position: absolute;
				top: 33%;
				left: 0;
				width: 50%;
				padding: 0 5%;
				box-sizing: border-box;
				.name {
					font-size: 36rpx!important;
				}
				.text {
					text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
					font-size: 24rpx;
					margin-top: 10rpx;
					color: #ffffff;
				}
				.laster {
					color: #ffffff;
					margin-top: 20rpx;
					display: flex;
					.cu-avatar-group {
						padding: 0 10rpx 0 20rpx;
						opacity: 0.85;
					}
					.cu-item {
						flex: 1;
					}
				}
			}
			.heads {
				text-align: right;
				padding: 0 5%;
				box-sizing: border-box;
				position: absolute;
				bottom: 4%;
				right: 7%;
				z-index: 10;
				.icon {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					border: 4rpx solid #fff;
					box-sizing: 0 0 2rpx #f5f5f5;
					opacity: 0.95;
				}
			}
		}
		.body {
			background: #FFFFFF;
			border-radius: 10px 10px 0 0;
			position: relative;
			top: -60rpx;
			margin-bottom: 80rpx;
			.cu-list.card-menu {
				margin-top: 30rpx;
				position: relative;
				margin-left: 0px;
				margin-right: 0px;
			}
			.list {
				border-bottom: 1rpx solid #f8f8f8;
				.cu-form-group {
					.title {
						flex: 3;
						font-family: PingFangSC-Regular;
						font-size: 15px;
						color: #333333;
					}
					.value {
						font-family: PingFangSC-Regular;
						font-size: 15px;
						color: #777777;
						text-align: left;
						flex: 12;
						line-height: 23px;
					}
					.cu-capsule {
						flex: 1;
						text-align: right;
						float: right;
						.icon {
							width: 22rpx;
							height: 28rpx;
						}
					}
					.textarea {
						padding: 28rpx 0;
					}
					.show1 {
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
						overflow: hidden;
					}
				}
				.voicePlay {
					flex: 1;
				}
			}
			.list:last-child {
				border-bottom: none;
			}
			.cu-list {
				.h10 {
					height: 10rpx;
					background: #F8F9FD;
				}
			}
			.uinfo {
				display: block;
				position: relative;
				padding: 30rpx;
				box-sizing: border-box;
				height: 250rpx;
				.t1 {
					display: flex;
					position: relative;
					.hd {
						width: 144rpx;
						height: 144rpx;
						border-radius: 50%;
						border: 6rpx solid #fff;
						position: relative;
						top: -80rpx;
						z-index: 996;
					}
					.name {
						font-family: PingFangSC-Semibold;
						font-size: 20px;
						color: #333333;
						letter-spacing: 0;
						display: inline-block;
						justify-content: center;
						margin-left: 40rpx;
						margin-top: 14rpx;
						height: 40rpx;
						position: relative;
						top: -20rpx;
						left: -10rpx;
					}
				}
				.bomt {
					position: relative;
					top: -55rpx;
					.kdesc {
						clear: both;
						display: block;
						font-size: 28rpx;
					}
					.tagGroup {
						.tag {
							background: #EFF3FE;
							border-radius: 12px;
							font-family: PingFangSC-Regular;
							font-size: 11px;
							color: #56689A;
							letter-spacing: 0;
							text-align: right;
							padding: 12rpx 18rpx;
							margin-right: 10px;
							margin-top: 30rpx;
						}
						.tag:nth-child(2){
							background: #E4F7FF;
							color: #B8865D;
						}
						.tag:nth-child(3){
							background: #FCF5EF;
							color: #5B7F8E;
						}
						.tag:nth-child(4){
							background: #FFF1F3;
							color: #E38798;
						}
					}
				}
			}
		}
	}
	.line10 {
		height: 20rpx;
		line-height: 20rpx;
		background: #f1f1f1;
	}
	.toUser {
		margin-top: 120px;
	}
	.v-total {
		position: relative;
		top: -42px;
		font-family: PingFangSC-Regular;
		font-size: 12px;
		color: #FFFFFF;
		letter-spacing: 0;
		text-align: right;
		width: 90%;
		text-align: right;
		margin: 0 5%;
		text-shadow: 0 0 2px #333333;
	}
</style>
<template>
	<scrolls :loads="loads" @scroll="scrollTop" @bottom="goBottom" bgColor="#F8F9FD">
		<view slot="content">
			<custom :colorStr="bgColor" :fullHide="fullHide"
			        :isBack="!comeType"
			        :isCustom="!!comeType">
				<view slot="content"> {{ title }} </view>
			</custom>
			<topTips :close="7000" />
			<div class="toShow" v-if="!errorMsg">
				<div class="cardtop">
					<div class="top animated fadeIn" :style="{background: `url(${onceBgt})`,backgroundSize: `cover`}">
						<swipers v-if="infos.card_images.length>1" :list="infos.card_images" dot="18" height="180" @change="toChange" />
					</div>
					<div class="v-total animated fadeIn" v-if="total>0" @tap.stop="looks">浏览量 {{total}}</div>
					<div class="body" :style="{ marginBottom: body + 'px'}" v-if="infos.card_header">
						<div class="uinfo animated fadeIn">
							<div class="t1">
								<img :src="infos.card_header" class="hd animated fadeIn" @tap.stop="headClick(infos.card_header)">
								<div class="name">
									{{ infos.card_name }}
									<span class="cu-tag round bg-default sm" v-if="myCard" style="margin-left:5px">我的名片</span>
								</div>
								<div class="tagBtn">
									<slot name="join"/>
								</div>
							</div>
							<div class="bomt">
								<div class="kdesc show1">
									{{infos.card_text || '暂无介绍~'}}
								</div>
								<div class="tagGroup">
									<slot name="tags"/>
								</div>
							</div>
						</div>
						<div class="cu-list menu shadow-lg radius">
							<div class="h10"></div>
							<slot name="content"/>
						</div>
					</div>
				</div>
				<slot name="bottom"/>
			</div>
			<div class="toUser animated fadeIn" v-else>
				<view class=" padding-lr">
					<view class="padding-xs flex align-center">
						<view class="flex-sub text-center">
							<view class="solid-bottom text-xsl padding">
								<text class="cuIcon-roundclosefill text-orange"></text>
							</view>
							<view class="padding">{{errorMsg}}</view>
						</view>
					</view>
				</view>
			</div>
		</view>
	</scrolls>
</template>
<script type="text/javascript">
	/**名片复用页
	 * Created by PhpStorm.
	 * User:  iyahe@qq.com (天明)
	 * Date: 2020/3/25 0025
	 * Time: 下午 12:11
	 * Description:
	 */
	import swipers from '@/components/swiper';
	import custom from '@/components/custom';
	import scrolls from '@/components/scrolls';
	import topTips from '@/components/toAdd';
	export default {
		name: 'xcard',
		props : {
			infos: {
				type: Object,
				default: {}
			},
			title: {
				type: String,
				default: ``
			},
			loads: {
				type: Number,
				default: 0
			},
			body: {
				type: Number,
				default: 30
			},
			errorMsg: {
				type: String,
				default: ``
			},
			total: {
				type: Number,
				default: 0
			},
			comeType: {
				type: Number,
				default: 0
			},
			myCard: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				bgColor: 'none',
				fullHide: true,
				onceBgt: `http://img10.he29.com/static/mtu4nd/e238d326bf9d1a87.png`
			}
		},
		watch: {
			infos (item) {
				try {
					if (typeof item.card_images === 'object') {
						if (item.card_images.length === 1) {
							this.onceBgt = item.card_images[0];
						}
					}
				}catch (e) {}
			},
			loads (val) {
				console.log(val)
			},
			errorMsg(val) {
				if(val) {
					this.fullHide = false;
					this.bgColor = this.$global.defaultColor;
				}
			}
		},
		components: {
			swipers,
			custom,
			scrolls,
			topTips
		},
		methods: {
			scrollTop (item) {
				if (item.scrollTop >= 70) {
					this.bgColor = this.$global.defaultColor;
					this.fullHide = false;
				} else {
					this.bgColor = 'none';
					this.fullHide = true;
				}
			},
			toChange (item) {
				this.thatImgs = item;
			},
			goBottom () {
				this.$emit('bottom');
			},
			headClick (imgSrc) {
				wx.previewImage({
					current: imgSrc,
					urls: [imgSrc]
				})
			},
			looks () {
				this.$emit('looks');
			}
		}
	}
</script>
